<template>
  <div class="inspection-form">
    <!-- 基础信息 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>基础信息</span>
      </div>
      <el-form label-position="left" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="任务编号">
              <el-input v-model="taskInfo.taskCoding" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="任务名称">
              <el-input v-model="taskInfo.pmcsName" disabled></el-input>
            </el-form-item>
          </el-col>
          <!-- 更多基础信息表单项... -->
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="计划名称">
              <el-input v-model="taskInfo.deviceSpotcheck.spotcheckName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计划序号">
              <el-input v-model="taskInfo.pmcsNumber" disabled></el-input>
            </el-form-item>
          </el-col>
          <!-- 更多基础信息表单项... -->
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="计划开始时间">
              <el-input v-model="taskInfo.pmcsOkontime" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计划结束时间">
              <el-input v-model="taskInfo.pmcsOkuntime" disabled></el-input>
            </el-form-item>
          </el-col>
          <!-- 更多基础信息表单项... -->
        </el-row>
      </el-form>
    </el-card>

    <!-- 点检人员 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>点检人员</span>
      </div>
      <el-form label-position="left" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="点检班组">
              <el-input v-model="taskInfo.deviceSpotcheck.spotcheckClassId" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="点检人">
              <el-input v-model="taskInfo.deviceSpotcheck.spotcheckPerson" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 设备信息 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>设备信息</span>
      </div>
      <el-form label-position="left" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="设备名称">
              <el-input v-model="taskInfo.equipment.name" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备编号">
              <el-input v-model="taskInfo.code2
                " disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="设备类型

">
              <el-input v-model="taskInfo.equipment.deviceType" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="规格型号

">
              <el-input v-model="taskInfo.equipment.specifications" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row> <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="存放位置">
              <el-input v-model="taskInfo.equipment.storageLocation" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="使用部门">
              <el-input v-model="taskInfo.equipment.useDepartments" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 点检时间 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>点检时间</span>
      </div>
      <el-form label-position="left" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="点检开始时间">
              <el-date-picker v-model="taskInfo.pmcsOkontime" type="datetime" placeholder="请选择时间"
                style="width: 480px"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="点检结束时间">
              <el-date-picker v-model="taskInfo.pmcsOkuntime" type="datetime" placeholder="请选择时间"
                style="width: 480px"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="点检用时">
              <el-input v-model="hour" style="width: 70px" placeholder="请输入" disabled></el-input>
              <span style="margin-left: 10px; margin-right: 10px">小时</span>
              <el-input v-model="minute" style="width: 70px" placeholder="请输入" disabled></el-input>
              <span style="margin-left: 10px; margin-right: 10px">分钟</span>
              <el-button type="primary"
                @click="calculateDuration(taskInfo.pmcsOkontime, taskInfo.pmcsOkuntime)">计算</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 点检项目 -->
    <el-card style="margin-bottom: 100px" class="box-card">
      <div slot="header" class="clearfix">
        <span>点检项目</span>
      </div>

      <el-row style="margin-bottom: 20px">
        <el-col :span="12">
          <el-button>导出</el-button>
        </el-col>
      </el-row>
      <el-table :data="inspectionDetails" @selection-change="handleSelectionChange1" border="0" ref="refIns"
        style="width: 100%" align="center" sortable>
        <el-table-column type="selection" width="55" />
        <el-table-column label="序号" width="180" align="center" fixed>
          <template slot-scope="scope">
            {{ (page - 1) * size + scope.$index + 1 }}
          </template></el-table-column>
        <el-table-column prop="pmtsName" label="点检项目名称" width="180" align="center"></el-table-column>
        <el-table-column prop="code" label="点检项目编号" width="180" align="center"></el-table-column>
        <el-table-column prop="pmtsPartId" label="点检部位" width="180" align="center">
        </el-table-column>
        <el-table-column prop="pmtsMethod" label="点检方法" width="180" align="center">
        </el-table-column>
        <el-table-column prop="pmtsContent" label="点检内容" width="180" align="center"></el-table-column>
        <el-table-column label="点检结果" width="180" align="center">
          <template slot-scope="scope">
            <el-span v-if="scope.row.pmtsResultId
              == 2">
              <el-input></el-input>
            </el-span>
            <el-span v-if="scope.row.pmtsResultId
              == 3">
              <el-span v-for="item in result" :key="item.options" :value="item.options">
                <el-radio v-model="isResult" :label="item" style="margin-right: 20px">{{ item.options
                  }}</el-radio>
              </el-span>
            </el-span>
            <el-span v-if="scope.row.pmtsResultId
              == 4">
              <el-span v-for="item in result" :key="item.options">
                <el-checkbox-group>
                  <el-checkbox v-model="isResult" :label="item" style="margin-right: 20px">{{ item.options
                    }}</el-checkbox>
                </el-checkbox-group>
              </el-span>
            </el-span>
          </template>
        </el-table-column>
        <el-table-column label="是否正常" width="180" align="center"></el-table-column>
        <el-table-column label="备注" width="180" align="center"></el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button @click="select(scope.row.code)">展示</el-button>
          </template>
        </el-table-column>
      </el-table>

    </el-card>

    <el-card class="box-card">
      <div class="upload-container">
    <h3>上传图片</h3>
    <p>最多上传10张图片</p>
    <div class="upload-area" @click="openFilePicker" @drop.prevent="handleDrop" @dragover.prevent>
      <p v-if="!selectedFiles.length">点击或者将图片拖拽到这里上传</p>
      <div v-for="(file, index) in selectedFiles" :key="index" class="uploaded-file">
        <img :src="URL.createObjectURL(file)" alt="Uploaded File">
        <button @click="removeFile(index)">删除</button>
      </div>
    </div>
  </div>
    </el-card>


    <!-- 表单底部按钮 -->
    <el-card class="position">
      <el-row :gutter="20">
        <el-col :offset="9" :span="6">
          <el-button @click="closeForm">关闭</el-button>
          <el-button type="primary" @click="saveDraft">暂存</el-button>
          <el-button type="success" @click="confirmForm">确认</el-button>
        </el-col>
      </el-row>

    </el-card>
  </div>
</template>

<script>
import { InsList } from '@/api/eastjet-maintenance/spotcheck/spotcheckTask';
import { selectZi } from "@/api/eastjet-maintenance/type/type";
import { selectList } from '@/api/eastjet-maintenance/spotcheck/spotcheckTask';
import { updateState, updateTask } from '@/api/eastjet-maintenance/spotcheck/spotcheckTask';
import { updateSkip } from '@/api/eastjet-maintenance/spotcheck/spotcheckTask';
import { query } from '@/api/eastjet-maintenance/spotcheck/spotcheckTask';


export default {
  data() {
    return {
      dialogVisible: false,
      skipReason: "",
      taskInfo: {},
      tasks: {},
      hour: 0,
      minute: "",
      page: 1,
      size: 10,
      pageselect: [10, 20, 30, 40, 50],
      inspectionDetails: [
        // 添加点检明细数据...
      ],
      inspectionProject: [],
      selectedFiles: [],
      mulitiSelect: [],
      mulitiSelect1: [],
      zhi: "sys_inpectionpro_type",
      ProjectType: [],
      result: [],
      skip: {
        "code": "",
        "cause": "",
        "skipNumber": ""
      },
      selectType: "",
      radio: [],
      tableData: {
        code: "",
        isResult: "",
        deviceCode: "",
        codeType:"",
        project:""
      },
      isResult: "",
      deviceCode: "",
    };
  }, mounted() {
    this.init();

  },
  methods: {
    init() {
      this.taskInfo = this.$route.query;
      console.log(this.taskInfo);
      this.taskInfo.pmcsOkontime = new Date(this.taskInfo.pmcsOkontime);
      this.taskInfo.pmcsOkuntime = new Date(this.taskInfo.pmcsOkuntime);
      query().then((res) => {
        console.log("res", res.data);
        this.inspectionDetails = res.data;
        console.log("明细", this.inspectionDetails);
      });
      console.log("info", this.$route.query);
      selectZi(this.zhi).then((res) => {
        this.ProjectType = res.data;
        console.log("字典", this.ProjectType);
      });
    },
    calculateDuration(date1, date2) {
      const oneHour = 60 * 60 * 1000; // 一小时的毫秒数
      console.log(date1, date2);
      const diffInTime = Math.abs(date2 - date1);
      const diffInHours = Math.round(diffInTime / oneHour);
      this.hour = diffInHours;
      const oneMinute = 60 * 1000; // 一分钟的毫秒数
      const diffInDate = Math.abs(date2 - date1);
      const diffInMinutes = Math.floor((diffInDate % oneHour) / oneMinute);;
      this.minute = diffInMinutes;
      this.taskInfo.pmcsTime = diffInHours + "小时" + diffInMinutes + "分钟";
      // 计算点检用时的方法
    },
    select(val) {
      console.log("123", val);
      selectList(val).then((res) => {
        this.result = res.data;
        console.log("select", this.result);
      })
    },
    ProList(val) {
      InsList(this.page, this.size, val).then((res) => {
        this.inspectionProject = res.data;
        this.deviceCode = val;
        console.log(res.data);
      });
    },
    actionIns() {
      this.radio.push({ "result": this.isResult.judgment, "options": this.isResult.options });
      this.tableData.deviceCode = this.taskInfo.code2;

      for (let j = 0; j < this.radio.length; j++) {
        this.tableData.isResult = this.radio[j].result;
        this.tableData.options = this.radio[j].options;

        for (let i = 0; i < this.mulitiSelect.length; i++) {
          this.tableData.project = this.mulitiSelect[i].code;
          this.tableData.codeType = this.taskInfo.code1;
          updateState(this.tableData).then((res) => {
            console.log(res);
          });
          console.log(this.tableData);
        }


      }

    },
    handleConfirm() {
      this.project = false;
    },
    skipInspection() {
      // 跳过点检的操作
      this.skip.code = this.taskInfo.code;
      this.skip.cause = this.skipReason, "skipNumber";
      this.skip.skipNumber = this.mulitiSelect1.length;
      this.dialogVisible = false;

    },
    exportData() {
      // 导出数据的操作
    },
    executeInspection(row) {
      // 执行点检的操作
      this.project = true;
      console.log(row);
      this.ProList(this.taskInfo.inspectiontaskCode);

    },
    handleSelectionChange1(val) {
      this.mulitiSelect = val;
    },
    handleSelectionChange(val) {
      this.mulitiSelect1 = val;
    },
    handleCurrentChange(val) {
      this.page = val;
      this.init();
    },

    handleSizeChange(size) {
      this.size = size;
      console.log(size);
      this.init();
    },
    uploadImage(row) {
      // 上传图片的操作
    },
    closeForm() {
      // 关闭表单的操作
      this.$router.push({ path: "/xun/xun/task" });
    },
    saveDraft() {
      // 暂存表单的操作
    },

    openFilePicker() {
      this.$refs.fileInput.click();
    },
    handleDrop(event) {
      const files = event.dataTransfer.files;
      this.addFiles(files);
    },
    addFiles(files) {
      const maxFiles = 10;
      for (let i = 0; i < files.length && this.selectedFiles.length < maxFiles; i++) {
        this.selectedFiles.push(files[i]);
      }
    },
    removeFile(index) {
      this.selectedFiles.splice(index, 1);
    },
    confirmForm() {
      // 确认表单的操作
      const year = new Date(this.taskInfo.pmcsOkontime).getFullYear();
      const month = new Date(this.taskInfo.pmcsOkontime).getMonth() + 1;
      const day = new Date(this.taskInfo.pmcsOkontime).getDate();
      const hour = new Date(this.taskInfo.pmcsOkontime).getHours();
      const minute = new Date(this.taskInfo.pmcsOkontime).getMinutes();
      const sencond = new Date(this.taskInfo.pmcsOkontime).getSeconds();
      console.log("时间：" + year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + sencond);
      const date1 = year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + sencond;
      const year1 = new Date(this.taskInfo.pmcsOkuntime).getFullYear();
      const month1 = new Date(this.taskInfo.pmcsOkuntime).getMonth() + 1;
      const day1 = new Date(this.taskInfo.pmcsOkuntime).getDate();
      const hour1 = new Date(this.taskInfo.pmcsOkuntime).getHours();
      const minute1 = new Date(this.taskInfo.pmcsOkuntime).getMinutes();
      const sencond1 = new Date(this.taskInfo.pmcsOkuntime).getSeconds();
      console.log("时间：" + year1 + "-" + month1 + "-" + day1 + " " + hour1 + ":" + minute1 + ":" + sencond1);
      const date2 = year1 + "-" + month1 + "-" + day1 + " " + hour1 + ":" + minute1 + ":" + sencond1;
      this.taskInfo.pmcsOkontime = date1;
      this.taskInfo.pmcsOkuntime = date2;
      console.log(this.taskInfo.pmcsOkontime);

      updateTask(this.taskInfo).then((res) => {
        if (res.data == "修改成功") {
          this.actionIns();
          this.$message.success("修改成功");
          this.closeForm();
        }
      });
    },
  },
};
</script>

<style scoped>
.position {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  z-index: 1;
}

.button-group {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  margin-top: 20px;
}

.inspection-form {
  padding: 20px;
}

.box-card {
  margin-bottom: 40px;
  width: 95%;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

.upload-container {
  text-align: center;
}

.upload-area {
  border: 2px dashed #ccc;
  padding: 20px;
  margin-top: 20px;
  cursor: pointer;
}

.uploaded-file {
  display: flex;
  align-items: center;
  margin: 10px 0;
}

.uploaded-file img {
  max-width: 100px;
  margin-right: 10px;
}
</style>